<template>
	<footer class="footer yd-flex-v-hC-vC">
		<img class="footer__logo scrollpoint sp-effect3" src="~@/assets/images/logo.png" alt="" >
		<div class="footer__icons yd-flex">
			<div @click="open('https://github.com/ydydydq')" class="footer__icon cursor scrollpoint sp-effect6">
				<i class="iconfont footer-i">&#xe691;</i>
			</div>
			<div @click="open('https://juejin.cn/post/7054385809679450119')" class="footer__icon cursor scrollpoint sp-effect6">
				<i class="iconfont footer-i">&#xe600;</i>
			</div>
			<div @click="open('https://gitee.com/ydydydq')" class="footer__icon cursor scrollpoint sp-effect6">
				<i class="iconfont footer-i">&#xe602;</i>
			</div>
		</div>
		<div class="footer__rights">
			<p class="scrollpoint sp-effect5">Copyright © 2022-01.<span @click="open('https://juejin.cn/user/1908407919184670')" class="anthor cursor">橙某人</span> All rights reserved.</p>
		</div>
	</footer>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
	setup() {

		return {
			open(url) {
				window.open(url);
			}
		};
	}
})
</script>

<style scoped>
.footer{
	margin-top: 100px;
	width: 100%;
	height: 400px;
	background: linear-gradient(-45deg, #bb1314 0%, #ffd89b 100%);
	box-shadow: 0 0 20px rgb(187, 19, 20, 0.5);
	padding-top: 20px;
	box-sizing: border-box;
}
.footer__logo{
	width: 60px;
	height: 60px;
	margin-bottom: 40px;
}
.footer__icons{
	margin-bottom: 40px;
}
.footer__icon{
	width: 52px;
	height: 52px;
	border: 2px solid #fff;
	border-radius: 50%;
	margin: 0 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: all 0.25s ease-in-out;
}
.footer-i {
	color: #fff;
	font-size: 25px;
	transition: all 0.25s ease-in-out;
}
.footer__icon:hover{
	background-color: #fff;
}
.footer__icon:hover .footer-i{
	color: #bb1314;
}
.footer__rights{
	font-size: 14px;
	color: #fff;
}
.anthor:hover{
	color: #bb1314;
}
</style>
